<template>
  <div>
    <el-card>
      <el-button class="addWorkPattern" @click="visible = true">添加工作模式</el-button>
      <el-table :data="list">
        <el-table-column label="工作模式编号" prop="id" />
        <el-table-column label="工作模式" prop="name" />
        <el-table-column label="类型" prop="workPatternTypeDesc" />
        <el-table-column label="工作日期" prop="workDate" />
        <el-table-column label="工作时间" prop="workEndMinute1">
          <template #default="{row}">
            {{ ((row.workStartMinute1 - row.workEndMinute1) / 60 ).toFixed(2) }}小时
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text">编辑</el-button>
            <el-button type="text" class="del" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <div class="block">
          <el-pagination
            :current-page="pagingData.page"
            :page-size="pagingData.pageSize"
            :page-sizes="[5,10,30,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
            @current-change="onPagination"
          />
        </div>
      </el-row>
      <!-- 新增工作模式组件 -->
      <add-work-pattern :visible.sync="visible" />
    </el-card>
  </div>
</template>

<script>
import { delWorkPatternAPI, gitWorkPagingAPI } from '@/api/employee'
import addWorkPattern from './components/add-work-pattern.vue'
export default {
  components: { addWorkPattern },
  data() {
    return {
      // 分页查询数据
      list: [],
      pagingData: {
        page: 1,
        pageSize: 5
      },
      total: 0,
      // 控制弹出层打开或隐藏
      visible: false
    }
  },
  created() {
    // 查询分页列表
    this.getPagination()
  },
  methods: {
    async getPagination() {
      const res = await gitWorkPagingAPI(this.pagingData)
      console.log('res  ----->  ', res)
      this.pagingData.page = res.data.page // 表单的当前页
      this.total = res.data.counts// 表单的总页树
      this.list = res.data.items// 表单渲染的数据
    },
    // 分页查询
    onPagination(page) {
      console.log('page  ----->  ', page)
      this.pagingData.page = page
      this.getPagination()
    },
    // 删除工作模式
    async del(id) {
      await delWorkPatternAPI(id)
      this.$message.success('删除工作模式成功')
      this.getPagination()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 28px;

  .addWorkPattern.el-button {
    background: #e15536;
    border-radius: 4px;
    border-color: transparent;
    color: #ffffff;
    margin-bottom: 20px;
  }

  .del {
    color: #f56c6c;
  }
}
</style>
